<template>
  <div class="pie-wrap">
    <div :style="{ animationDelay: delay}" :class='["pie", {"pie-all": num == 100}]'>
      <div class="pie-inner">
        <p class="mb10 fs14 cblue">{{percent}}%</p>
        <p>获客人数完成度</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Pie',
  data () {
    return {
      num: 0
    }
  },
  props: {
    percent: {
      type: Number,
      default: 0
    },
    number: {
      type: Object,
      default: 0
    }
  },
  computed: {
    delay () {
      // 转化为延迟多少秒
      return `-${this.num}s`
    }
  },
  mounted () {
    this.startAnimate(1, this.percent, 20)
  },
  watch: {
    percent () {
      // console.log(this.percent)
      this.startAnimate(1, this.percent, 20)
    }
  },
  methods: {
    // 匀动动画
    startAnimate (step, limit, speed) {
      // console.log(this.num, typeof limit)
      setTimeout(() => {
        if (this.num < limit) {
          this.num += step
          this.startAnimate(step, limit, speed)
        } else {
          this.num = limit
        }
      }, speed)
    }
  }
}
</script>

<style scoped>
  .pie-wrap {
    width: 200upx;
    height: 200upx;
    text-align: center;
  }
.pie {
    display: inline-block;
    position: relative;
    width: 200upx;
    height: 200upx;

    border-radius: 50%;
    background: #FFF1E1;
    background-image: linear-gradient(to right, transparent 50%, #FFA133 0);
    color: transparent;
    text-align: center;
  }
  .pie::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    width: 50%; height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background-color: inherit;
    transform-origin: left;
    animation: spin 50s linear infinite, bg 100s step-end infinite;
    animation-play-state: paused;
    animation-delay: inherit;
  }
  .pie-all {
    background: #FFA133;
    background-image: none;
  }
  .pie-all::before {
    background-color: #FFA133;
  }
  @keyframes spin {
    to { transform: rotate(.5turn); }
  }
  @keyframes bg {
    50% { background: #FFA133; }
  }
  .pie-inner {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 95%; height: 95%;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    color:#383838;
    font-size: 24upx;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

</style>
